#control {
  .control_bg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F0F0F0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 3;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .05);
    right: 3%;
    bottom: 5%;
    cursor: pointer;
    transition: 0.5s;
  
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    .iconfont {
      font-size: 25px;
    }
  }

  &:hover {
    .dl {
      transform: translate(-110%);
    }

    .control_bg {
      border-radius: 10px;
    }

    .search {
      transform: translate(-110%, -110%);
    }

    .top {
      transform: translateY(-110%);
    }
  } 

  .dl {
    z-index: 2;
    transition: 0.5s;
  }

  .search {
    z-index: 2;
    transition: 0.5s;
  }

  .top {
    z-index: 2;
    transition: 0.5s;
  }  
}
// 搜索
#search_box {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .55);
  z-index: 99;

  .search_main {
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      font-size: 50px;
      color: var(--bg);
      cursor: pointer;
    }

    form {
      display: flex;
      padding: 10px;
      align-items: center;
      margin-bottom: 80px;
      background-color: rgba(0, 0, 0, .3);
      border: 10px solid #F9F8F6;
      border-radius: 10px;
      transition: 0.5s;

      input {
        width: 0;
        outline: none;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid #F9F8F6;
        font-size: 30px;
        color: #F9F8F6;
        padding: 10px;
        transition: 0.5s;

        &:-input-placeholder {
          color: rgba(255, 255, 255, .5);
        }
      }

      .search_close {
        transition: 0.5s;
        transform: scale(0.2);
      }
    }
  }
}

// 自定义字体
@font-face {
  font-family: 'iconfont2';
  src: url('../../assets/fonts/iconfont.ttf?t=1631373390172') format('truetype');
}
.iconfont2 {
  font-family: "iconfont" !important;
  font-size: 60px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 50%;
}